<template>
	<view class="whole">
		<u-toast ref="uToast" />
		<view class="password_top">
			<view class="password" style="display: flex;justify-content: flex-start;">
				<text style="color: #F78623;">+86</text>
				<view style="width: 2rpx;background-color:#262934;height: 30rpx;margin:0 20rpx;"></view>
				<input type="text" placeholder="请输入手机号" v-model="account" disabled=false 	>
			</view>
			<view style="height: 2rpx;background-color: #262934;margin: 0  30rpx;"></view>
			<view class="password" @click="statefocus">
				<!-- <input type="text" placeholder="请填写获取的验证码" v-model="code"  >
					<view style="width: 2rpx;background-color:#262934;height: 30rpx;margin-left: 150rpx;"></view>
				<view>
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
					@change="codeChange"></u-verification-code>
					<text @click="getCode" style="margin-right: 0rpx;color: #F78623;" :style="timer?'margin-right: 20rpx;':''">{{tips}}</text>
				</view> -->
				<input type="number" placeholder="请填写获取的验证码" v-model="code" style="font-size: 28rpx;"  :focus="focusCode" @blur="loseCode"  placeholder-style="font-size: 28rpx;">
				<u-verification-code :seconds="seconds"   ref="uCode" @change="codeChange"></u-verification-code>
				<view style="display: flex;align-items: center;">
					<view style="width: 2rpx;height: 30rpx;background-color: #262934;margin-right: 15rpx;"></view>
					<text @click="getCode" style="color: #F78623;font-size: 28rpx;white-space: normal" >{{tips}}</text>
				</view>
			</view>
		</view>
		
		<view class="button" @click="Submit">
			下一步
		</view>
	</view>
</template>

<script>
	import api from '../../api/api'
	export default {
		data() {
			return {
				account:'',
				code:'',
				tips: '',
				// refCode: null,
				seconds: 60,
				timer:false,
				focusCode:false
			}
		},
		onLoad() {
			let phone = uni.getStorageSync('userInfo')
			this.account = phone.account
		},
		methods: {
			loseCode(){
				this.focusCode = false
			},
			statefocus(){
				this.focusCode  = !this.focusCode 
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode(){
				if(!this.timer){
					if(this.account==''){
						this.$refs.uToast.show({
							title: '请填写手机号',
						})
						return;
					}
					let res = await api.sendCodeSms({
						query:{
							account:this.account,
							type:3
						},
						method:'post'
					})
					if(res.code==0){
						this.$refs.uToast.show({
							title:res.msg,
							type: 'success', 
						})
					}
					this.timer =true
					this.tips = this.seconds
					var time = setInterval(() => {
						this.tips--;
						if (this.tips <= 0) {
							clearInterval(time);
							this.tips = '重新获取'
							this.timer =false
						}
					}, 1000);
				}else{
					this.$refs.uToast.show({
						title: '已发送短信',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						// type: 'success', 
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}
			},
			Submit(){
				if(this.code==''){
					this.$refs.uToast.show({
						title: '验证码不能为空',
					})
					return;
					
				}
				uni.navigateTo({
					url:`../new_phone/new_phone?phone=${this.account}&code=${this.code}`
				})
			}
		}
	}
</script>

<style>
	.whole{
		background-color: #111218;
		min-height: 100vh;
	}
	.password_top{
		border: 2rpx solid #262934;
		margin: 0 30rpx;
		background-color: #1C1E27 ;
		border-radius: 25rpx;
		position: relative;
		top: 50rpx;
		font-size: 28rpx;
	}
	.password{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #FFFFFF;
		margin: 20rpx 30rpx;
		min-height: 50rpx;
	}
	.password_center{
		position: relative;
		top: 50rpx;
		color: #999999;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin: 30rpx;
		font-size: 28rpx;
	}
	.button{
		position: relative;
		top: 100rpx;
		color: #FFFFFF;
		margin:30rpx;
		height: 90rpx;
		background-color: #F78623 ;
		background-image: linear-gradient(to right, #F78623 , #D5280A );
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
	}
	

</style>
